@import "../scss/mixin1.scss";

.footerall {
    position: relative;
    background-color: #ccc8c6;
    width: 100%;
    height: 782px;

    .footer_essential {
        height: 296px;
        background-color: #fafafa;

        .main_width {
            margin: 0 auto;
            max-width: 1400px;

            .dr_footer-icon {
                display: flex;
                padding: 100px 0 88px;
                justify-content: space-around;
                overflow: hidden;
                text-align: center;

                li {
                    zoom: 1;
                    text-align: center;
                    vertical-align: top;

                    a {
                        display: block;
                        font-size: 14px;
                    }

                    .tit {
                        display: block;
                        font-size: 14px;
                    }

                    .txt {
                        display: block;
                        margin-top: 14px;
                        font-size: 12px;
                        line-height: 24px;
                        color: #000;
                    }
                }
            }

        }
    }

    .footer_info {
        width: 100%;
        height: 416px;
        background: #696665;

        .main_width {
            padding: 54px 0;

            display: flex;
            justify-content: space-between;
            margin: 0 auto;
            max-width: 1400px;

            .info_left {
                display: flex;

                flex-grow: 1;
                flex-shrink: 1;
                flex-basis: 0%;

                justify-content: flex-start;
                margin-left: 60px;

                .info_tag {
                    margin-right: 14%;

                    .tag_wrap {
                        margin: 0 0 44px;
                        position: relative;

                        .tag_tit {
                            position: relative;
                            font-size: 14px;
                            color: #fff;
                            font-weight: 400;
                            .icon-fuwu{
                                margin-right: 14px;
                            }
                            img {
                                width: 16px;
                                height: 16px;
                                vertical-align: middle;
                                margin-right: 14px;

                            }

                            a {
                                position: relative;
                                font-size: 14px;
                                color: #fff;
                                font-weight: 400;
                            }
                        }

                        .inner {
                            padding: 0 0 0 30px;
                            list-style: none;
                            margin: 0;


                            li {
                                font-size: 14px;
                                line-height: 32px;
                                transition-property: all;
                                transition-duration: 1s;
                                transition-timing-function: ease;
                                transition-delay: 0s;

                                a {
                                    position: relative;
                                    color: #adaaa9;

                                    &::after {
                                        position: absolute;
                                        display: block;
                                        content: "";
                                        left: 0;
                                        
                                        width: 0;
                                        height: 1px;
                                        background: #adaaa9;
                                        transition: all .5s ease-in-out;
                                    }
                                   &:hover::after{
                                       width: 100%;
                                   }
                                }
                               

                            }
                        }
                    }
                }
            }

            .info_right {
                margin-right: 40px;
                color: #fff;

                .scan_slogan {
                    font-size: 16px;
                    font-weight: 400;
                }

                .qr_code {
                    margin-top: 27px;
                    font-size: 0;
                    display: block;
                    color: #fff;

                    img {
                        margin-right: 36px;
                        width: 107px;
                    }
                }

                .sub_slogan {
                    margin-top: 12px;
                    max-width: 257px;
                    font-size: 14px;
                    line-height: 30px;
                }

            }


        }
    }

    .footer_declare {
        width: 100%;
        height: 70px;
        font-size: 0;
        line-height: 70px;
        text-align: center;
        background-color: #2c2a29;


        .main_width {
            margin: 0 auto;
            max-width: 1400px;

            .normal-view {
                width: 100%;
                height: 70px;
                color: #888888;

                a {
                    font-size: 12px;
                    color: #adaaa9;
                    vertical-align: middle;

                    img {
                        margin-right: 8px;
                        width: auto;
                        margin-left: 10px;
                        vertical-align: middle;
                    }
                }

                .copyright {
                    font-size: 12px;
                    color: #adaaa9;
                    vertical-align: middle;
                }

                img {
                    margin-left: 10px;
                    width: 70px;
                    vertical-align: middle;
                }
            }
        }
    }
}

#dr-quickservice{
    position: fixed;
    display: none;
    right: 16px;
    bottom: 150px;
    width: 58px;
    text-align: center;
    z-index: 999;
    .appointment-icon{
        width: 58px;
        height: 58px;
        border-radius: 50%;
        border: 1px solid #2c2a2a;
        position: relative;
        background-color: #22292d;
        margin: 0 auto 10px;
        cursor: pointer;
       
        img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 25px;
            cursor: pointer;
            text-align: center;
        }
        .text{
            display: none;
            color: #fff;
            width: 36px;
            font-size: 14px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            cursor: pointer;
            text-align: center;
        }
        &:hover{
            background-color: #9a7262;
            border-color: #9a7262;
        }
        &:hover>.text{
            display: block;
            background-color: #9a7262;
            border-color: #9a7262;
        }
        &:hover>img{
            display: none;
        }
    
    }
    .wrap{
        width: 58px;
        height: 58px;
        border-radius: 50%;
        border: 1px solid #2c2a2a;
        position: relative;
        background-color: #22292d;
        margin: 0 auto 10px;
        cursor: pointer;
       i{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 25px;
        cursor: pointer;
        text-align: center;
        font-family: "iconfont" !important;
        font-size: 25px;
        color: white;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
       }
       &:hover{
        
            background-color: #9a7262;
            border-color: #9a7262;
       }
    }
    // .conection-wrap{

    // }
    
}


// a:hover{
//     border-bottom: 2px solid grey;
//     text-align: center;
//     transition: all 0.5s ease-in-out;
// }